<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import filter from "@/filter/filterForService"

export default {
    name: "AddImageMarker.component",
    components: {Maptalks},
    setup() {

        let mapOnLoadCB = (map) => {
            map.setZoom(14)
            let center = map.getCenter();

            let layer = new maptalks.VectorLayer(MapLayerConst.MAP_MARKER_LAYER).addTo(map);

            let marker1 = new maptalks.Marker(center.sub(0.009, 0), {
                    "symbol": {
                        "markerFile": filter("relativePath2Img")("1.png"),
                        "markerWidth": 28,
                        "markerHeight": 40,
                        "markerDx": 0,
                        "markerDy": 0,
                        "markerOpacity": 1
                    }
                }
            ).addTo(layer);

            let marker2 = new maptalks.Marker(center.sub(0.006, 0), {
                    "symbol": {
                        "markerFile": filter("relativePath2Img")("2.png"),
                        "markerWidth": 28,
                        "markerHeight": 40,
                        "markerDx": 0,
                        "markerDy": 0,
                        "markerOpacity": 1
                    }
                }
            ).addTo(layer);

            let marker3 = new maptalks.Marker(center.sub(0.003, 0), {
                    "symbol": {
                        "markerFile": filter("relativePath2Img")("3.png"),
                        "markerWidth": 28,
                        "markerHeight": 40,
                        "markerDx": 0,
                        "markerDy": 0,
                        "markerOpacity": 1
                    }
                }
            ).addTo(layer);

            let marker4 = new maptalks.Marker(center, {
                    "symbol": {
                        "markerFile": filter("relativePath2Img")("4.png"),
                        "markerWidth": 28,
                        "markerHeight": 40,
                        "markerDx": 0,
                        "markerDy": 0,
                        "markerOpacity": 1
                    }
                }
            ).addTo(layer);

            let marker5 = new maptalks.Marker(center.add(0.003, 0), {
                    "symbol": {
                        "markerFile": filter("relativePath2Img")("5.png"),
                        "markerWidth": 28,
                        "markerHeight": 40,
                        "markerDx": 0,
                        "markerDy": 0,
                        "markerOpacity": 1
                    }
                }
            ).addTo(layer);

            let marker6 = new maptalks.Marker(center.add(0.006, 0), {
                    "symbol": {
                        "markerFile": filter("relativePath2Img")("6.png"),
                        "markerWidth": 28,
                        "markerHeight": 40,
                        "markerDx": 0,
                        "markerDy": 0,
                        "markerOpacity": 1
                    }
                }
            ).addTo(layer);

            let markerList = [marker1, marker2, marker3, marker4, marker5, marker6];

            markerList.forEach(marker => {
                marker.setInfoWindow({
                    'custom': true,
                    'content': `
                        <div class="info-window-content">
                            <div class="pop_time">Custom InfoWindow ${new Date().toLocaleTimeString()}</div>
                            <div class="arrow"></div>
                        </div>
                    `
                });

                marker.on("mouseover", () => {
                    marker.openInfoWindow();
                })

                marker.on("mouseout", () => {
                    marker.closeInfoWindow();
                })
            })
        };

        return {
            mapOnLoadCB
        }
    }
}
</script>

<style lang="less">
.info-window-content {
    color: #fff;
    width: 300px;
    height: 35px;
    background-color: #051127;
    border: 1px solid #0c2c45;
    .pop_time {
        height: 35px;
        margin: 0 10px;
        line-height: 35px
    }
    .arrow {
        display: block;
        border-top: 10px solid #162259;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -10px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
    }
}
</style>
